<script setup>
    import { ref, reactive} from 'vue'


    const props = defineProps({
        tagsArray:{
            type:Array
        },
        bgColor:{
            type:String,
        }
    })
</script>

<template>
   <div class="flex flex-align-center gap-10">
        <slot name="header"></slot>    
         
        <div v-for="(tog,index) in tagsArray" :key="index">
            <span class="tag">{{tog}}</span>
        </div>
    </div>
</template>


<style  scoped>
 

    .tag-title{
        text-align: left;
        color: gray;
        font-size: 1rem;
        font-weight: 700;
    }
    .tag{
        font-size: .9rem;
        font-weight: 300;
        cursor: pointer;
        padding:.5rem 1rem;
        border-radius: 100px;
    }
    .tag:hover{
        color: #409eff;
        font-weight: bold;
        text-shadow: 4px 4px 4px#409eff;
    }
</style>